<template>
  <div>
    <div class="header">
      <div class="iconfont iconjiantou2" @click="goback"></div>
      <div class="search">
        <div class="iconfont iconsearch"></div>
        <input ref="keywordText" type="text" v-model="keyword" />
      </div>
      <div class="btn" @click="handleSearch">搜索</div>
    </div>

    <div class="historyList" v-if="postList.length == 0">
      <h2>历史记录</h2>
      <div class="list">
        <div
          class="item"
          @click="historySearch(item)"
          v-for="(item, index) in history"
          :key="index"
        >
          {{ item }}
        </div>
      </div>
    </div>

    <div class="postList">
      <PostItem :postData="post" v-for="post in postList" :key="post.id" />
    </div>
  </div>
</template>

<script>
import PostItem from "../components/PostItem";
export default {
  components: {
    PostItem,
  },
  data() {
    return {
      keyword: "",
      postList: [],
      history: [],
    };
  },
  watch: {
    keyword(newVal) {
      //   如果关键字没有最新值应该要清空搜索的文章列表
      if (!newVal) {
        this.postList = [];
      }
    },
    // 历史记录持久化第一步，每当数组发生变化就要把新数组存到本地存储
    history() {
      localStorage.setItem("history", JSON.stringify(this.history));
    },
  },
  created() {
    //   页面一进入就自动聚焦输入框
    this.$nextTick(() => {
      this.$refs.keywordText.focus();
    });
    //   历史记录持久化第二部，如果页面进来发现本地存储中有历史记录的数组，则要把它拿出来
    if (localStorage.getItem("history")) {
      this.history = JSON.parse(localStorage.getItem("history"));
    }
  },
  methods: {
    handleSearch() {
      // 每当搜索的时候，都会把关键字存放在history里
      //   this.history.push(this.keyword); // 把关键放在数组后面
      this.history.unshift(this.keyword);
      this.$axios({
        url: "/post_search",
        params: {
          keyword: this.keyword,
        },
      }).then((res) => {
        // console.log(res.data);
        // 把搜索到的文章数据放到文章列表中
        this.postList = res.data.data;
      });
    },
    goback() {
      if (this.postList.length > 0) {
        this.postList = [];
      } else {
        this.$router.back();
      }
    },
    historySearch(item) {
      // 相当于把item赋值于Keyword在输入框里，在运行一次handlesearch函数
      this.keyword = item;
      this.handleSearch();
    },
  },
};
</script>

<style lang="less" scoped>
.header {
  display: flex;
  align-items: center;
  height: 66/360 * 100vw;
  padding: 0 12/360 * 100vw;
  .search {
    display: flex;
    align-items: center;
    height: 40/360 * 100vw;
    margin: 0 10/360 * 100vw;
    border: 1px solid #ccc;
    border-radius: 18/360 * 100vw;
    .iconsearch {
      font-size: 18/360 * 100vw;
      padding-left: 12/360 * 100vw;
      padding-right: 4/360 * 100vw;
    }
    input {
      width: 210/360 * 100vw;
      border: none;
      outline: none;
    }
  }
  .btn {
    font-size: 16/360 * 100vw;
    color: #333;
  }
}
.historyList {
  padding: 0 12/360 * 100vw;
  h2 {
    font-size: 16/360 * 100vw;
  }
  .list {
    display: flex;
    .item {
      font-size: 12/360 * 100vw;
      padding: 10/360 * 100vw;
      padding-left: 0;
    }
  }
}
</style>